<template>
  <div class="main-container">
    <div class="messages-container">
      <el-affix :offset="90">
        <div class="container-title">
          <span>题目录入&nbsp;<el-text>请根据规则进行输入</el-text></span>
          <el-button link @click="openDesc">规则与示例</el-button>
        </div>
      </el-affix>
      <el-input v-model="messages" type="textarea" :autosize="{ minRows: 20, maxRows: 100 }" />
    </div>
    <div style="border: 1px solid #eee"></div>
    <div class="question-container">
      <el-affix :offset="90">
        <div class="container-title">
          <span>题目检查</span>
          <div class="classify">
            <cascader-classify v-model="categoryId" :category-type="3" />
            <el-button type="primary" @click="onsubmit">保存</el-button>
          </div>
        </div>
      </el-affix>
      <template v-for="(question, index) in questions" :key="index">
        <question-content :question="question" :index="index + 1" />
        <el-divider style="margin-bottom: 20px" />
      </template>
    </div>
  </div>
  <rule-desc ref="descRef" />
</template>

<script setup>
  import { ref, watch } from 'vue'
  import QuestionContent from '@/components/Preview/Question/Content.vue'
  import { parseQuestion } from '@/utils/question.js'
  import CascaderClassify from '@/components/Cascader/Classify/index.vue'
  import { questionApi } from '@/api/question.js'
  import { ElMessage } from 'element-plus'
  import RuleDesc from './Desc.vue'

  const descRef = ref()
  const openDesc = () => {
    descRef.value.onOpen()
  }

  const props = defineProps({
    messages: {
      type: String,
      default: ''
    }
  })

  const emit = defineEmits(['callback'])

  // 保存试题
  const onsubmit = async () => {
    if (categoryId.value === '0') {
      ElMessage.warning('请选择分类')
      return
    }
    if (questions.value === undefined || questions.value.length === 0) {
      ElMessage.warning('请输入试题')
      return
    }
    questions.value.forEach((item) => {
      if (item.questionType !== 1 && item.questionType !== 2 && item.questionType !== 3) {
        delete item.options
      }
    })
    await questionApi.questionBatchSave(questions.value)
    ElMessage.success('保存成功')
    emit('callback')
  }

  const categoryId = ref('0')
  watch(categoryId, (newValue) => {
    questions.value = parseQuestion(messages.value, newValue)
  })

  const messages = ref(props.messages)
  const questions = ref(parseQuestion(messages.value, categoryId.value))
  // 监听messages
  watch(messages, (newValue) => {
    // console.log('messages', newValue, oldValue)
    // 解析试题
    questions.value = parseQuestion(newValue, categoryId.value)
  })
</script>
<style lang="scss" scoped>
  .main-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    .container-title {
      display: flex;
      justify-content: space-between;
      padding-right: 10px;
      height: 35px;
      align-items: center;
      background-color: #ffffff;
      .classify {
        display: flex;
        gap: 10px;
        justify-content: space-between;
      }
    }
  }
  .messages-container {
    flex: 1;
    overflow: auto;
    .question {
      white-space: pre-wrap;
      font-size: 14px;
      line-height: 2;
    }
  }
  .question-container {
    flex: 1;
    overflow: auto;
    font-size: 14px;
  }
</style>
